<template>
  <BaseDialog
    v-model="dialogVisible"
    :title="title"
    width="1100px"
    :before-close="handleClose"
  >
    <el-form
      ref="refDialogForm"
      v-loading="formLoading"
      class="set-dialog-form"
      :label-width="language === 'en' ? '180px' : '94px'"
      :model="formData"
      :rules="rules"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('device.deviceModel')" prop="model">
            <BaseSelect
              v-model="formData.model"
              :options="deviceModelList"
              :label="$t('device.deviceModel')"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="调料名称" prop="flavourCode">
            <BaseSelect
              v-model="formData.flavourCode"
              :options="flavourNameList"
              :label="$t('device.flavourName')"
              @change="handleNameSelectChange"
              filterable
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="调料类型" prop="flavourType">
            <BaseSelect
              v-model="formData.flavourType"
              :options="flavourTypeList"
              :label="$t('device.flavourType')"
              clearable
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="基准系数" prop="baseCoefficient">
            <TextInput v-model="formData.baseCoefficient" :disabled="type==='edit'" label="基准系数" type="number" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="校准系数" prop="adjustCoefficient">
            <TextInput v-model="formData.adjustCoefficient" label="校准系数" type="number" clearable />
          </el-form-item>
        </el-col>
       
      </el-row>
    </el-form>
    <!-- <el-alert title="特别说明：" type="warning" show-icon :closable="false">
      特别说明：请根据对应型号设备认真核对后再修改，避免超出可控范围导致设备投放调料与实际不符！<br />
      基准系数出厂设定，用户不可修改。校准系数由用户修改，若不确定，请设置为1！
    </el-alert> -->
    <template #footer>
      <div class="form-dialog-footer" style="padding-top: 10px">
        <el-button plain @click="handleClose">{{
          $t('public.cancel')
        }}</el-button>
        <el-button type="primary" @click="handleSubmitForm">{{
          $t('public.confirm')
        }}</el-button>
      </div>
    </template>
  </BaseDialog>

  
</template>

<script setup>
import useSelectOptions from '../../hooks/useSelectOptions'

const props = defineProps({
  type: {
    type: String,
    default: 'add' // add | edit
  },
  id: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update'])
const dialogVisible = defineModel({
  type: Boolean,
  default: false
})
const { language } = storeToRefs(useAppStore())
const title = computed(() =>
  props.type === 'add' ? '新建投放信息' : '编辑投放信息'
)

const refDialogForm = ref(null)
const formLoading = ref(false)
const formData = ref({
  model: '',
  flavourName: '',
  flavourCode: '',
  flavourType: '',
  baseCoefficient: '',
  adjustCoefficient: ''
})
const rules = {
  model: g_rules.commonInputText(g_t('device.deviceModel')),
  flavourCode: g_rules.commonInputText('调料名称'),
  flavourType: g_rules.commonInputText('调料类型'),
  baseCoefficient: g_rules.commonInputText('基准系数'),
  adjustCoefficient: g_rules.commonInputText('校准系数')
}

const {deviceModelList, getQueryModelList, flavourNameList, getflavourNameList ,flavourTypeList, getQueryTypeList} = useSelectOptions()
const refContentTable = ref(null)
const tableLoading = ref(false)
const columnWidthObj = ref({})

watch(
  () => formData.value.actionList,
  (nv, ov) => {
    useTableColumnWidth({
      refTable: refContentTable.value
    }).getTableColumnWidth(data => {
      columnWidthObj.value = data
    })
    nextTick(() => {
      refDialogForm.value.validateField(['actionList'])
    })
  },
  {
    deep: true
  }
)

onMounted(() => {
  getQueryModelList()
  getflavourNameList()
  getQueryTypeList()
  props.type === 'edit' && getFormData()
})

const handleNameSelectChange = e => {
  formData.value.flavourName =
    flavourNameList.value.find(item => item.value === e)?.label || ''
}

const getFormData = _ => {
  g_api.device
    .apiFlavouradjustDetail({ id: props.id })
    .then(({ code, data }) => {
      if (code === '200' && data) {
        formData.value = {
          ...formData.value,
          id: '',
          appId: '',
          tenantId: '',
          status: '',
          ...data
        }
        console.log('formData.value', formData.value)
      }
    })
}

const handleClose = _ => {
  dialogVisible.value = false
}



const handleSubmitForm = () => {
  if (formLoading.value) return
  refDialogForm.value.validate(valid => {
    console.log('formData.value', formData.value)
    if (!valid) return
    formLoading.value = true
    const urlMethod =
      props.type === 'add'
        ? g_api.device.apiFlavouradjustCreate
        : g_api.device.apiFlavouradjustUpdate
    urlMethod(formData.value)
      .then(res => {
        if (res.code === '200') {
          ElMessage({
            message: res.message,
            type: 'success'
          })
          handleClose()
          emit('update')
        }
      })
      .finally(() => {
        formLoading.value = false
      })
  })
}
</script>

<style scoped lang="scss"></style>
